function updateColor() {
    const hue = document.getElementById('hueSlider').value;
    const saturation = document.getElementById('saturationSlider').value;
    const lightness = document.getElementById('lightnessSlider').value;

    // 更新背景颜色
    document.body.style.backgroundColor = `hsl(${hue}, ${saturation}%, ${lightness}%)`;

    // 更新CSS变量
    document.documentElement.style.setProperty('--hue', hue);
    document.documentElement.style.setProperty('--saturation', `${saturation}%`);
    document.documentElement.style.setProperty('--lightness', `${lightness}%`);

    // 同步输入框数值
    document.querySelectorAll('.value-input').forEach((input, index) => {
        input.value = [hue, saturation, lightness][index];
    });

    // 更新数值显示
    document.querySelectorAll('.control-group').forEach((group, index) => {
        const value = [hue, saturation, lightness][index];
        const unit = index === 0 ? '°' : '%';
        group.setAttribute('data-value', `${value}${unit}`);
    });
}

// 滑块事件监听
document.querySelectorAll('.color-slider').forEach(slider => {
    slider.addEventListener('input', updateColor);
});

// 输入框事件监听
document.querySelectorAll('.value-input').forEach((input, index) => {
    input.addEventListener('change', function() {
        const slider = document.querySelectorAll('.color-slider')[index];
        let value = Math.min(Math.max(this.value, slider.min), slider.max);
        slider.value = value;
        updateColor();
    });
});

// 初始化
updateColor();